<template>
  <view class="container">
    <view class="order_str">
      orderStr:
    </view>
    <textarea
        class="textarea"
        placeholder="请输入orderStr"
        maxLength="-1" showCount autoHeight allowClear
        onChange="onChangeOrderStr"
    />
    <button class="btn" onTap="createQRcode" type="primary" inline>生成页面二维码</button>
    <button class="btn" onTap="pullPay" type="primary" inline>拉起芝麻免押受理台</button>
  </view>
  <modal visible="{{visible}}" onClose="handleClose">
    <view class="body">
      <image mode="scaleToFill" src="{{ qrCode }}" class="bodyImg"/>
      <view class="bodyAction">
        <icon type="CloseCircleOutline" onTap="handleClose"/>
      </view>
    </view>
  </modal>
</template>

<script setup lang="ts">
import {Page} from '@alipay/minifish';
// @version v-0.1 2024年07月01日 zitong.cc,zhangziyue.zzy
Page({
  data: {
    qrCode: '',
    orderStr: '',
    visible: false,
  },
  onLoad(query) {
    console.log('%c onLoad', 'color:orange', query);
    const {orderStr} = query || ({} as any);
    if (orderStr) {
      this.setData(
          {
            orderStr,
          },
          () => {
            this.pullPay();
          },
      );
    }
  },
  onChangeOrderStr(value, e) {
    console.log('%c onChangeOrderStr', 'color: orange', value, e);
    this.setData({
      orderStr: value,
    });
  },
  createQRcode() {
    console.log('%c createQRcode', 'color: orange');
    let code = '';
    const {orderStr} = this.data;
    if (orderStr) {
      code = `alipays://platformapi/startapp?appId=2021003188651490&nbupdate=syncforce&page=%2Fpages%2Fopen%2Findex%3ForderStr%3D%22${orderStr}%22`;
    }
    if (code) {
      my.call('generateImageFromCode', {
        code,
        format: 'QRCODE',
        width: 424,
        bizType: 'Trust',
        correctLevel: 'H',
        codeColor: '#ff0000',
        success: (res) => {
          const {image} = res; // image为base64格式的图片字符串
          image &&
          this.setData({
            qrCode: image,
            visible: true,
          });
        },
        fail: () => {
        },
      });
    }
  },
  pullPay() {
    const {orderStr} = this.data;
    my.tradePay({
      orderStr,
      success: (res) => {
        console.log('%c tradePay-success', 'color:orange', res);
      },
      fail: (e) => {
        console.log('%c tradePay-fail', 'color:orange', e);
      },
    });
  },
  handleClose() {
    this.setData({
      visible: false,
    });
  },
});
</script>